<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 多表单元素处理 </title>
</head>

<body>
    <div id="test"></div>
</body>

</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    class Login extends React.Component {
        state = {
            txt: "",
            content: "",
            city: "bj",
            isChecked: false,
        }
        handleForm = (e) => {
            // 获取当前 DOM 对象
            const target = e.target
            // 根据类型获取值
            const value = target.type === "checkbox" ? target.checked : target.value
            // 获取 name
            const name = target.name
            this.setState({
                [name]: value,
            })
        }

        submit = (e)=>{
                e.preventDefault()
                const {txt,content,city,isChecked} = this.state
                alert(`表单数据${txt}_${content}_${city}_${isChecked}`)
            }

        render() {
        console.log(this.state,"____ ");
            return (
                <div>
                    {/* 文本框 */}
                    <input
                        type='text'
                        name='txt'
                        value={this.state.txt}
                        onChange={this.handleForm}
                    />
                    <br />
                    {/* 富文本框 */}
                    <textarea
                        name='content'
                        value={this.state.content}
                        onChange={this.handleForm}
                    ></textarea>
                    <br />
                    {/* 下拉框 */}
                    <select
                        name='city'
                        value={this.state.city}
                        onChange={this.handleForm}
                    >
                        <option value='bj'>北京</option>
                        <option value='sh'>上海</option>
                        <option value='cs'>长沙</option>
                    </select>
                    <br />
                    {/* 复选框 */}
                    <input
                        name='isChecked'
                        type='checkbox'
                        checked={this.state.isChecked}
                        onChange={this.handleForm}
                    ></input>
                    <button onClick={this.submit}>登录</button>
                </div>

            )
        }
    }
    ReactDOM.render(<Login />, document.getElementById('test'))
    // 多个表单事件处理程序 优化(使用一个事件处理程序 处理多个表单元素) 
        // 给表单元素添加 name 属性，名称与 state 相同
        // 根据表单元素类型获取对应值
        // 在 change 事件处理程序中通过 [name] 来修改对应的 state
        // 受控组件，控制文本框的值
</script>